<template>
  <dv-border-box-12 class="banner">
    <div class="video-wrap">
      <video ref="playerRef" controls autoplay muted class="video" v-if="initialIndex==0"></video>
      <video ref="playerRef1" controls autoplay muted class="video"  v-else></video>
    </div>
    <!-- 下方文字指示器组 -->
    <div class="indicators-wrapper" >
        <div v-for="(item, index) in carouselList" :key="index" class="indicator-item" :class="{ 'active': initialIndex === index }">
            <span class="indicator-text">{{ item.text }}</span>
        </div>
    </div>
  </dv-border-box-12>
</template>
 
<script setup>
import { ref, onMounted, onUnmounted,nextTick  } from "vue"
import flvjs from "flv.js";

const carouselList=ref([
{ id: 1, text: '烘焙车间' },
{ id: 2, text: '面点车间' }
])
const playerRef = ref()
const playerRef1 = ref()
//可打印出当前所触发的事件
const initialIndex = ref(0)
const flvUrl= ref('http://192.168.10.127:9998')
const flvUrl1= ref('http://192.168.10.127:9997')
const timers=ref()

// 监听轮播图改变
onMounted(()=>{
  initFlvPlayer()
  let len=carouselList.value.length
  timers.value=setInterval(()=>{
    if(initialIndex.value<len-1) {
      initialIndex.value++;
    } else {
      initialIndex.value = 0;
    }
    if(initialIndex.value==0){
      initFlvPlayer()
    }else{
      initFlvPlayer1()
    }
  },10000)

})

  // 清除定时器
  onUnmounted(() => {
    clearInterval(timers.value);
  });

const initFlvPlayer=()=>{
  if (flvjs.isSupported()) {
    const flvPlayer = flvjs.createPlayer({
      type: 'flv',
      url: flvUrl.value+'/flv', // 这里填写你的 FLV 视频流 URL
      cors: true, // 启用CORS
      headers: {
          'Referer': flvUrl.value // 设置Referer头
      }
    }, {
      enableStashBuffer: false, // 启用缓冲优化
      stashInitialSize: 128, // 初始缓冲区大小（单位：KB）
      isLive: true // 表示这是一个直播流
    });
    flvPlayer.attachMediaElement(playerRef.value);
    flvPlayer.load(); // 加载视频流
    setTimeout(()=>{
      flvPlayer.play(); // 加载视频流
    },1000)
    // 处理视频播放错误的语法
    flvPlayer.on('error', () => {
      console.error('视频加载失败，请稍候重试！')
      //destroy()
      return false
    })
    
  }else {
    console.error('FLV is not supported in this browser.');
  }
}


const initFlvPlayer1=()=>{
  if (flvjs.isSupported()) {
    const flvPlayer1 = flvjs.createPlayer({
      type: 'flv',
      url: flvUrl1.value+'/flv', // 这里填写你的 FLV 视频流 URL
      cors: true, // 启用CORS
      headers: {
          'Referer': flvUrl1.value // 设置Referer头
      }
    }, {
      enableStashBuffer: false, // 启用缓冲优化
      stashInitialSize: 128, // 初始缓冲区大小（单位：KB）
      isLive: true // 表示这是一个直播流
    });
    flvPlayer1.attachMediaElement(playerRef1.value);
      flvPlayer1.load(); // 加载视频流
    setTimeout(()=>{
      flvPlayer1.play()// 开始播放视频流
    },1000)
    // 处理视频播放错误的语法
    flvPlayer1.on('error', () => {
      console.error('视频加载失败，请稍候重试！')
      //destroy()
      return false
    })
    
  }else {
    console.error('FLV is not supported in this browser.');
  }
}

</script>
 
<style lang="less" scoped>
.video-wrap{
  height: 80%; 
  .video{
    width: 98%;
    margin: 2% 1%;
    height: 96%;
    display: none;
    &:first-child{
      display: block;
    }
  }
}

.indicators-wrapper{
    height:18%;
    width:98%;
    margin:0 1% 2%;
    display:flex;
    background:#0b2545;
    color:#fff;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
    .indicator-item{
      flex:1;
      height:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      background:rgba(0,0,0,0.5);
      &.active{
          background:#1296db;
      }
  }
}
</style>